<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Challenger</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="__PLUGIN__/layui/css/layui.css" media="all">
	<style type="text/css">
		.one {
			border: 1px solid #E6E6E6;
		    margin: 10px;
		    padding: 10px;
		}
	</style>
</head>
<body>

<div class="one">
	<table id="artListTable" lay-filter="artListTable"></table>
	<script type="text/html" id="editBar">
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="detail">预览</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="close">关闭</a>
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="show">发布</a>
        <!-- <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="recommend">推荐</a> -->
    </script>
</div>

<script src="__JS__/jquery-3.3.1.min.js"></script>
<script src="__PLUGIN__/layui/layui.js"></script>

<script>
	layui.use(['element', 'table', 'form', 'layer'], function(){
        var element = layui.element,
            layer   = layui.layer,
            form    = layui.form,
			table   = layui.table;

        // 监听单元格编辑
        table.on('edit(artListTable)', function(obj){
            //注：edit是固定事件名，artListTable 是table原始容器的属性 lay-filter="对应的值"
            // console.log(obj.value); //得到修改后的值
            // console.log(obj.field); //当前编辑的字段名
            // console.log(obj.data); //所在行的所有相关数据
            // return;
            $.ajax({
                type: 'post',
                url : "{:url('news/editFieldById')}",
                data: {'field':obj.field, 'id':obj.data.id, 'val':obj.value},
                dataType: 'json',
                success: function(result) {
                    if (result.status == 0) {
                        layer.msg(result.message);
                        setTimeout(function () {
                            window.location.reload();   // 刷新tab页面
                        }, 1000);
                    } else if (result.status == 1) {
                        layer.alert(result.message);
                    }
                    return;
                },
                error:function(jqXHR){
                    layer.msg("发生错误" + jqXHR.status);
                }
            });
        });

		// 执行渲染
        var tableIns = table.render({
            elem: document.getElementById('artListTable'),  //指定原始表格元素选择器（推荐id选择器）
            url: "{:url('news/newslist')}",
            method: 'post',
            type: 'json',
            edit:'text',    // 是否可以编辑
            height: 'full',    // 高度
            // width:871,
            page: true,     // 开启分页
            limits: [30,60,90,100],
            limit: 30,      // 默认采用每页30条数据
            // loading: true,  // 是否显示加载条
            even: true,     //开启隔行背景
            cols: [[        // 设置表头
                // {type: 'numbers', width:30},
                {field:'id', title:'ID', width:55, sort:true},
                {field:'title', title:'名称',  edit:'text', style:'background-color: #5FB878; color: #fff;', sort:true},
                {field:"cname", title:'类别', width:90, edit:'text', sort:true},
                {field:'create_at', title:'创建时间', width:160, sort:true, style:'background-color: #6B6C68; color:#fff;'},
                {field:'publish_at', title:'发布时间', width:160, sort: true, style:'background-color: #6B6C68; color: #fff;'},
                // {field:'delete_at', title:'关闭时间', width:160, sort: true, style:'background-color: #6B6C68; color: #fff;'},
                // {field:'recommend', title: '推荐', width: 90, sort: true, templet: '#recommendTpl'},
                {field:'status', title:'状态', width:73, templet:'#statusTpl'},
                {align:'center', title: '状态管理', width:210, toolbar:'#editBar', style:'background-color: #F2F2F2;'},
            ]],
        });

        // 监听工具条
        table.on('tool(artListTable)', function(obj) {
        //注：tool是工具条事件名, test 是table原始容器的属性 lay-filter="对应的值"
            var data     = obj.data;    // 获得当前行数据
            var layEvent = obj.event;   // 获得 lay-event 对应的值
            var tr       = obj.tr;      // 获得当前行 tr 的DOM对象

            // 编辑
            if (layEvent === 'edit') {
                return document.location.href = "{:url('news/editnews')}?id="+data.id;

            // 预览
            } else if (layEvent === 'detail') {
                // http://news.local.com/index/art/artDet?id=2
                return window.open("{:url('news/newsdet')}?id="+data.id);

            // 发布
            } else if (layEvent === 'show') {
                $.ajax({
                    type: 'post',
                    url : "{:url('news/editStatus')}",
                    data: {'method':'show', 'status':1, 'id':data.id},
                    dataType: 'json',
                    success: function(result) {
                        if (result.status == 0) {
                            layer.msg(result.message);
                            setTimeout(function () {
                                window.location.reload();   // 刷新tab页面
                            }, 1000);
                        } else if (result.status == 1) {
                            layer.alert(result.message);
                        }
                        return;
                    },
                    error:function(jqXHR){
                        layer.msg("发生错误" + jqXHR.status);
                    }
                });

            // 关闭
            } else if (layEvent === 'close') {
                layer.confirm('真的关闭么', function(index) {
                    $.ajax({
                        type: 'post',
                        url : "{:url('news/editStatus')}",
                        data: {'method':'close', 'status':-1, 'id':data.id},
                        dataType: 'json',
                        success: function(result) {
                            if (result.status == 0) {
                                layer.msg(result.message);
                                setTimeout(function () {
                                    obj.del();          // 删除对应行（tr）的DOM结构
                                    // layer.close(index);
                                    location.reload();
                                }, 1000);
                            } else if (result.status == 1) {
                                layer.alert(result.message);
                            }
                            return;
                        },
                        error:function(jqXHR){
                            layer.msg("发生错误" + jqXHR.status);
                        }
                    });
                });
            }
        });

        // 监听switch开关
        /*form.on('switch', function(data){
            var id_info  = data.elem.id;
            var id       = (id_info.split('_'))[1];
            var url      = "{:url('news/recommend')}";
            var postData = {};
                postData['action']    = 'switchrecommend';
                postData['id']        = id;
                postData['recommend'] = data.value;
            $.post(url, postData, function(result){
                // var result = JSON.parse(result);    // json 字符串 转 对象
                layer.msg(result.message);
                console.log(result.message);
                if (result.status == 0) {
                    $("#recommend_"+id).val(result.message);
                }
                form.render('checkbox');
            },"JSON");
        });*/
	});
</script>

<!-- status 模版 -->
<script type="text/html" id="statusTpl">
  {{#  if(d.status === '-1'){ }}
    <span style="color: #6B6C68;">已关闭</a>
  {{#  } else if(d.status === '0'){ }}
    <span style="color: red;">待审核</a>
  {{#  } else{ }}
    <span style="color: #000000;">发布中</a>
  {{#  } }}
</script>

<!-- recommend 模版 -->
<script type="text/html" id="recommendTpl">
  {{#  if(d.recommend == 'on'){ }}
    <input type="checkbox" name="recommend" lay-skin="switch" lay-text="推荐|关闭" id="recommend_{{ d.id }}" value="on" checked="checked">
  {{#  } else { }}
    <input type="checkbox" name="recommend" lay-skin="switch" lay-text="推荐|关闭" id="recommend_{{ d.id }}" value="off">
  {{#  } }}
</script>

</body>
</html>
